<template>
  <basic-container>
    <chc-crud ref="crud" :dataTableId="dataTableId" :page="{pageSize:25}">
            <template slot="menuLeft">
              <el-button
                         class="filter-item"
                         @click="onSearchDlgOpen"
                         size="small"
                         type="primary"
                         icon="el-icon-search">配置查询项
              </el-button>
              <el-button
                         class="filter-item"
                         @click="onCodeDlgOpen"
                         size="small"
                         type="primary"
                         icon="el-icon-edit">代码
              </el-button>
            </template>

    </chc-crud>
    <el-dialog title="代码生成"
               :visible.sync="codeDlgVisible" :close-on-click-modal="false" width="80%">
		 <el-form :model="codeDlg.form"
							 :rules="codeDlg.rules"
							 ref="codeDlgForm"
							 label-width="100px">
			 <el-row :gutter="20"
			        :span="24">
							<el-col :span="8">
								 <el-form-item label="模块编码" prop="module" :span="12">
									 <el-input type="text"
														 v-model="codeDlg.form.module"
														 auto-complete="off"
														 placeholder="示例: test"></el-input>
								 </el-form-item>
							</el-col>
							<el-col :span="8">
								 <el-form-item label="界面编码" prop="id" :span="12">
									 <el-input type="text"
														 v-model="codeDlg.form.id"
														 auto-complete="off"
														 placeholder="示例: orderQuery"></el-input>
								 </el-form-item>
							</el-col>
							<el-col :span="8">
								 <el-form-item label="界面名称" prop="title" :span="12">
									 <el-input type="text"
														 v-model="codeDlg.form.title"
														 auto-complete="off"
														 placeholder="示例: 订单查询"></el-input>
								 </el-form-item>								
							</el-col>
			 </el-row>
			</el-form>
       <el-tabs v-model="codeActive">
          <el-tab-pane label="index.vue" name="index.vue">
            <el-input type="textarea"
                    v-model="indexCode"
                    readOnly="true"
                    :autosize="{ minRows: 20, maxRows: 20}">
            </el-input>

          </el-tab-pane>
          <el-tab-pane label="option.js" name="option.js">
            <el-input type="textarea"
                    v-model="jsCode"
                    readOnly="true"
                    :autosize="{ minRows: 20, maxRows: 20}">
            </el-input>
          </el-tab-pane>
          <el-tab-pane label="menu.json" name="menu">
            <el-input type="textarea"
                    v-model="menuCode"
                    readOnly="true"
                    :autosize="{ minRows: 20, maxRows: 20}">
            </el-input>
          </el-tab-pane>
      </el-tabs>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="onCodeDlgDownload()">下载代码
        </el-button>
        <el-button type="primary"
                   @click="onCodeDlgClose()">关闭
        </el-button>
      </div>
    </el-dialog>
    <el-dialog lock-scroll
               :modal-append-to-body="false"
               :append-to-body="true"
               :title="'配置查询项'"
               :visible.sync="searchDlgVisible"
               :close-on-click-modal="false">
    <el-transfer v-model="searchColumnIndex"
                 :data="columnList"
                 :titles="['非查询项', '查询项']"
                 :props="{key:'prop'}"></el-transfer>

<!--      <el-checkbox-group v-model="searchColumnIndex">
        <el-row :span="24">
          <el-col :span="6"
                  v-for="(item,index) in columnList"
                  :key="index">
            <el-checkbox :label="item.prop">{{item.label}}</el-checkbox>
          </el-col>
        </el-row>
      </el-checkbox-group> -->
			<br>
    </el-dialog>

  </basic-container>
</template>

<script>
  import {getAVueIndexCode,getMenuCode} from "@/components/chc-ui/api/data-table";
	import {ajaxDownload} from "@/util/download.js"

  export default {
    data() {
      return {
        dataTableId: '',
        codeDlgVisible:false,
        codeActive: 'index.vue',
        indexCode:'',
        jsCode:'',
        menuCodeTemplate:'',
        columnList:[],
        searchDlgVisible: false,
        searchColumnIndex:[],
				codeDlg: {
					form: {
						id:'',
						title:'',
						module:''
					},
					rules: {
						module: [{required: true, message: '请填写模块编码', trigger: 'blur'}],
						id:     [{required: true, message: '请填写界面编码', trigger: 'blur'}],
						title: [{required: true, message: '请填写界面名称', trigger: 'blur'}]
					},
					
				}
      }
    },
		computed:{
			menuCode(){
				if (this.menuCodeTemplate){
					return this.menuCodeTemplate.replace(/{{module}}/g,this.codeDlg.form.module?this.codeDlg.form.module:'xxx')
					.replace(/{{id}}/g,this.codeDlg.form.id?this.codeDlg.form.id:'xxx')
					.replace(/{{title}}/g,this.codeDlg.form.title?this.codeDlg.form.title:'xxx');
				}
			}
		},
    watch:{
      searchColumnIndex(){
				let columns = this.$refs.crud.tableOption.column;
				columns.forEach(col=>{
					col.search=this.searchColumnIndex.indexOf(col.prop)>=0;
				})
				this.$refs.crud.tableOption = Object.assign({},this.$refs.crud.tableOption,{column:columns})
				this.$refs.crud.$refs.headerSearch.init();
				// if (this.$refs.crud.$refs.headerSearch) {
				// 	this.$refs.crud.$refs.headerSearch.init();
				// }
				// else {
				// 		//兼容avue1.0
				// 	//更新列查询标记
				// 	this.$refs.crud.tableOption.column.forEach(col=>{
				// 		col.search = this.searchColumnIndex.indexOf(col.prop)>=0;
				// 	})
				// 	this.$refs.crud.formInit();
				// 	//this.$set(this.$refs.crud.tableOption,"column",this.$refs.crud.tableOption.column)
				// 	//this.$refs.crud.forceUpdate();
				// }
      }
    },

    created(){
        this.dataTableId = this.$route.params.id;
        getAVueIndexCode(this.dataTableId).then(response=>{
          if (response.data){
            this.indexCode= response.data;
          }
        });
        getMenuCode(this.dataTableId).then(response=>{
          if (response.data){
            this.menuCodeTemplate= JSON.stringify(response.data, null, 4);
          }
        });
    },
    mounted() {
    },
    methods:{
      onCodeDlgOpen() {
        let option = this.$refs.crud.deepClone(this.$refs.crud.tableOption);
        let visibleCols = [];
        let hideCols = [];
        option.column.forEach(column=>{
          if (column.hide){
            //column.hide = true;
            column.editDisplay = false;
            column.addDisplay = false;
            hideCols.push(column);
          }
          else {
            visibleCols.push(column);
          }
        })
        option.column=visibleCols.concat(hideCols);
        this.jsCode = 'export default ' + JSON.stringify(option,null, 4);
        this.codeDlgVisible=true;
      },
      onCodeDlgClose() {
        this.codeDlgVisible=false;
      },
      onCodeDlgDownload() {
        this.$refs['codeDlgForm'].validate(valid => {
						if (valid) {
							ajaxDownload('/datatable/downloadCode/'+this.dataTableId,{
								id:this.codeDlg.form.id,
								jsCode:this.jsCode,
								menuCode:this.menuCode});
						} else {
							return false
						}
          });
      },
      onSearchDlgOpen() {
        this.columnList = this.$refs.crud.tableOption.column;
        let cols = [];
        this.columnList.forEach(column=>{
          if (column.search)
            cols.push(column.prop);
        })
        this.searchColumnIndex = cols;
        this.searchDlgVisible=true;
      }
    }
  };
</script>